<template>
    <div class="flex flex-col h-full py-4 px-6">
        <tabs-pane
            mode="default"
            face="grey"
            :index="tabIndex"
            :list="tabLists"
        />

        <el-table
            v-loading="pager.loading"
            :data="pager.lists"
            size="large"
            class="mt-4"
            style="height: 100%"
        >
            <el-table-column label="编号" prop="log_sn" min-width="150" show-tooltip-when-overflow  />
            <el-table-column label="类型" prop="change_type" min-width="120" />
            <el-table-column label="项目名" prop="project" min-width="120">
                <template #default="scope: { row: UserWalletResponse }">
                    {{ scope.row.project || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="变动数量" prop="change_amount" min-width="100">
                <template #default="scope: { row: UserWalletResponse }">
                    <span v-if="scope.row.action === 1" class="text-success">+{{ scope.row.change_amount }}</span>
                    <span v-else class="text-error">-{{ scope.row.change_amount }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="create_time" min-width="175" />
            <el-table-column label="操作" width="80" fixed="right">
                <template #default="{ $index }">
                    <el-button
                        type="primary"
                        link
                        @click="handleDetail($index)"
                    >
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div v-if="pager.lists.length > 0" class="flex justify-end my-4 mb-0">
            <paging
                v-model="pager"
                layout="prev, pager, next"
                @change="queryLists"
            />
        </div>

        <ClientOnly>
            <popup
                :show="showPop"
                width="600px"
                title="明细详情"
                confirmButtonText=""
                cancelButtonText=""
                @close="showPop = false"
            >
                <div class="p-6 pt-2">
                    <el-form label-width="90px" label-position="left">
                        <el-form-item label="记录编号" class="!mb-1">{{ details.log_sn }}</el-form-item>
                        <el-form-item label="操作时间" class="!mb-1">{{ details.create_time }}</el-form-item>
                        <el-form-item label="项目名称" class="!mb-1">{{ details.project || '-' }}</el-form-item>
                        <el-form-item label="变动类型" class="!mb-1">{{ details.change_type }}</el-form-item>
                        <el-form-item label="变动数值" class="!mb-1">
                            <span v-if="details.action === 1" class="text-success">+{{ details.change_amount }}</span>
                            <span v-else class="text-error">-{{ details.change_amount }}</span>
                        </el-form-item>
                    </el-form>
                    <el-table v-if="details.additional.length > 0" :data="details.additional">
                        <el-table-column prop="name" label="模块名称"/>
                        <el-table-column prop="alias" label="AI模型">
                            <template #default="scope: { row: UserWalletAdditional }">
                                {{ scope.row.alias || '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="total_price" :label="`消耗`+useAppStore().getAmountUnit">
                            <template #default="scope: { row: UserWalletAdditional }">
                                {{  scope.row.use_points || '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="total_tokens" :label="`消耗Tokens`">
                            <template #default="scope: { row: UserWalletAdditional }">
                                {{  scope.row.total_tokens || '-' }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </popup>
        </ClientOnly>
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/composables/usePaging'
import useAppStore from '~/stores/app'
import userApi from '~/api/user'

const showPop = ref<boolean>(false)
const details = ref<UserWalletResponse>({} as UserWalletResponse)

// 选项类型
const tabIndex = ref<number>(0)
const tabLists = ref([
    {scene: 'points', name: '积分明细'}
])

// 分页查询
const { pager, queryLists } = usePaging<UserWalletResponse[]>({
    fetchFun: userApi.wallet
})

/**
 * 处理详情
 *
 * @param {number} index
 * @returns {Promise<void>}
 */
const handleDetail = async (index: number): Promise<void> => {
    showPop.value = true
    details.value = (pager.lists[index] as any)
}

onMounted(async () => {
    await queryLists()
})
</script>
